<template>
  <div class="tag-list">
    <div class="tag-list-header">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索标签..."
        clearable
        @input="handleSearch"
        style="width: 200px; margin-bottom: 10px;"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    
    <div class="tag-list-content" v-loading="loading">
      <div v-if="filteredTags.length === 0" class="no-tags">
        暂无标签数据
      </div>
      
      <el-tag
        v-for="tag in filteredTags"
        :key="tag.labelId"
        :type="getTagType(tag)"
        :color="tag.color"
        :closable="closable"
        :disable-transitions="false"
        @click="handleTagClick(tag)"
        @close="handleTagClose(tag)"
        class="tag-item"
        style="margin: 5px; cursor: pointer;"
      >
        {{ tag.labelName }}
      </el-tag>
    </div>
    
    <div class="tag-list-footer" v-if="showFooter">
      <el-pagination
        small
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { listLabel } from "@/api/note/noteLabel";

export default {
  name: "TagList",
  props: {
    // 是否显示关闭按钮
    closable: {
      type: Boolean,
      default: false
    },
    // 是否显示分页
    showFooter: {
      type: Boolean,
      default: false
    },
    // 每页显示数量
    pageSize: {
      type: Number,
      default: 20
    },
    // 初始选中的标签
    selectedTags: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      allTags: [],
      filteredTags: [],
      loading: false,
      searchKeyword: "",
      currentPage: 1,
      total: 0
    };
  },
  created() {
    this.loadTags();
  },
  methods: {
    // 加载标签数据
    async loadTags() {
      this.loading = true;
      try {
        const response = await listLabel({});
        this.allTags = response.rows || [];
        this.total = response.total || this.allTags.length;
        this.filteredTags = this.allTags;
        this.handleSearch(); // 应用可能存在的搜索关键词
      } catch (error) {
        console.error("加载标签失败:", error);
      } finally {
        this.loading = false;
      }
    },
    
    // 处理搜索
    handleSearch() {
      if (!this.searchKeyword) {
        this.filteredTags = this.allTags;
      } else {
        this.filteredTags = this.allTags.filter(tag => 
          tag.labelName.toLowerCase().includes(this.searchKeyword.toLowerCase())
        );
      }
      
      this.total = this.filteredTags.length;
    },
    
    // 处理分页变化
    handlePageChange(page) {
      this.currentPage = page;
      // 简单分页实现
      const start = (page - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.filteredTags = this.allTags.slice(start, end);
    },
    
    // 处理标签点击
    handleTagClick(tag) {
      this.$emit('tag-click', tag);
    },
    
    // 处理标签关闭
    handleTagClose(tag) {
      this.$emit('tag-close', tag);
    },
    
    // 根据标签状态获取标签类型
    getTagType(tag) {
      if (tag.status === '1') {
        return 'info'; // 停用状态
      }
      return ''; // 正常状态
    },
    
    // 刷新标签列表
    refresh() {
      this.loadTags();
    }
  }
};
</script>

<style scoped>
.tag-list {
  width: 100%;
}

.tag-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.tag-list-content {
  min-height: 100px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-bottom: 15px;
}

.no-tags {
  text-align: center;
  color: #909399;
  padding: 30px 0;
}

.tag-list-footer {
  display: flex;
  justify-content: center;
}

.tag-item {
  margin: 5px;
}
</style>